<template>
	<view style="background: #fff;">
		<!-- 返回上一页 -->
		<view class="" style="width: 100%; background: #fff;">
			<view class=""
				style=" position: relative; width: 90%;padding-top: 60rpx; margin: auto; height: 100rpx; display: flex; align-items: center; ">
				<image @click="toReturn" style="width: 50rpx; height: 50rpx;" src="../../../static/images/goBack.png">
				</image>
				<span style="margin-left: 20rpx;">意见反馈</span>
				<span @click="toOpinion" style="position: absolute; right: 0; font-size: 20rpx;color: #5b5b5b;">
					提交反馈</span>
			</view>
		</view>
		<!-- 内容 -->
		<view class="" style="width: 90%; margin: auto;">
			<image style="width: 100%; height: 250rpx; border-radius: 30rpx;" src="../../../static/images/user/tu.png">
			</image>
			<!-- 1 -->
			<!-- <view class="" style="border-bottom: 1px solid #ccc; height: 100rpx; display: flex; align-items: center; justify-content: space-between;">
			<view class="">
				<span> 问题场景 </span>
				<span style="color: red;">*</span> 
				<span style="margin-left: 20rpx;">请选择问题发生的场景</span>
			</view>
			<view class="" @click="showDialog()">
				<image style="width: 30rpx; height: 30rpx;" src="../../../static/images/user/xia.png"></image>
			</view>
		</view> -->
			<!-- 多行输入框 -->
			<view class=""
				style=" padding: 40rpx 40rpx  0 40rpx;  border-top: 1px solid #ccc;  border-bottom: 1px solid #ccc;">
				<textarea v-model="valueContent" placeholder-style="color:#9c9c9c" placeholder="说说你的问题" />
			</view>
			<!--信息  -->
			<view style="height: 100rpx; border-bottom: 1rpx solid #ccc; display: flex;align-items: center;">
				<span> QQ/微信 <span style="color: red;">* </span>：</span>
				<input v-model="valueWechat" placeholder="请填写" />
			</view>
			<view style="height: 100rpx;  display: flex;align-items: center;">
				<span> 电话号码 <span style="color: red;">*</span> ：</span>
				<input v-model="valuePhone" placeholder="请填写" />
			</view>
		</view>
		<!-- 弹窗 -->
		<!-- <view class="">
			<view class="dialog-mask" v-if="dialogVisible">
				<view class="dialog-content">
					<text style="margin-left: 200rpx; font-size: 35rpx; font-weight: 700;">选择问题场景</text>
					<view class=""v-for="(item,index) in dataList" style="padding-left: 20rpx; display: flex; justify-content: space-between;">
						<view style="padding: 10rpx; 0">
							<span style=" font-weight: 700;">·</span> <span style="margin-left: 10rpx;">{{item.name}}</span>
						</view>
						<view >
							<checkbox></checkbox>
						</view>
					</view>
					<view style="height: 100rpx; color: #1a73e8; display: flex;justify-content: space-around;align-items: center; margin-top: 20rpx; ">
						<p style="text-align: center;line-height: 100rpx; width: 50%;border-top: 2rpx solid#ccc;height: 100rpx; " @click="okDialog">确定</p>
						<p style=" text-align: center;line-height: 100rpx; width: 50%;border-left: 1px solid #ccc;height: 100rpx; border-top: 2rpx solid#ccc;" @click="hideDialog">取消</p>
					</view>
					
				</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	import {
		getMyFeedback
	} from '@/http/api.js'
	export default {
		data() {
			return {
				valueContent: '', //反馈问题
				valueWechat: '', //微信号
				valuePhone: '', //手机号
				userInfo: uni.getStorageSync('userInfo'),
			};
		},
		methods: {
			// 返回上一页
			toReturn() {
				uni.navigateBack();
			},
			// 打开弹窗
			showDialog() {
				this.dialogVisible = true;
			},
			// 关闭弹窗 取消
			hideDialog() {
				this.dialogVisible = false;
			},
			// 关闭弹窗 确认
			okDialog() {
				this.dialogVisible = false;
			},
			// 提交意见反馈
			toOpinion() {

				if (this.valueContent && this.valueWechat && this.valuePhone) {
					this.MyFeedback()
				} else {
					if (this.valuePhone == '') {
						uni.showToast({
							title: '请填写您的电话号码',
							duration: 2000,
							icon: "none"
						});
					}
					if (this.valueWechat == '') {
						uni.showToast({
							title: '请填写您的QQ/微信',
							duration: 2000,
							icon: "none"
						});
					}

					if (this.valueContent == '') {
						uni.showToast({
							title: '请填写您的问题',
							duration: 2000,
							icon: "none"
						});
					}

				}
			},
			// 意见反馈接口
			MyFeedback() {
				let data = {
					"content": this.valueContent, //反馈问题
					"wechat": this.valueWechat, //微信号
					"phone": this.valuePhone, //手机号
					"token": this.userInfo.userinfo.token,
				}
				getMyFeedback(data).then((res) => {
					console.log(res[1].data, "意见反馈接口");
					if (res[1].data.code == 1) {
						uni.showToast({
							title: '反馈提交成功',
							duration: 2000,
							icon: "none"
						});
						
						 setTimeout(() => {
							 this.valueContent = ''
							 this.valueWechat = ''
							 this.valuePhone = ''
						  uni.navigateBack();;
						  }, 3000); // 设置延迟时间为2秒
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body,
	uni-page-refresh {
		background: #f4f6f5;
		height: 100%;

	}

	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dialog-content {
		background-color: #fff;
		// padding: 20rpx 40rpx;
		width: 600rpx;
		height: 530rpx;

	}
</style>